<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue</title>
  <script src="/vue.js"></script>
</head>
<body>
  <div id="root">
    <h1>{{title}}</h1>
    <gp20></gp20>
  </div>
  <!-- <book>
    <name title="ddd">a</name>
    <author>b</author>
  </book>
  {
    "book": {
      "name": {
        "child": "a",
        "title": "ddd"
      }
    }
  } -->
  <script>
    // 全局定义组件的方法
    // Vue.component('gp20', {
    //   data() {
    //     return {
    //       show: true,
    //       fruits: [
    //         '🍐',
    //         '🍇',
    //         '🍌'
    //       ]
    //     }
    //   },

    //   template: `
    //     <ul v-if="show">
    //       <li v-for="fruit in fruits">
    //         {{fruit}}
    //       </li>
    //     </ul>
    //   `
    // })

    // 局部定义组件的方法
    let gp20 = {
      data() {
        return {
          show: true,
          fruits: [
            '🍐',
            '🍇',
            '🍌'
          ]
        }
      },

      template: `
        <ul v-if="show">
          <li v-for="fruit in fruits">
            {{fruit}}
          </li>
        </ul>
      `
    }

    // 数据驱动编程
    var vm = new Vue({
      // options
      el: '#root',
      data: {
        title: '这是一个标题'
      },
      components: {
        gp20
      }
    })
  </script>
</body>
</html>